(function (Vue) {

	var STORAGE_KEY = 'items-vuejs';
	// 本地存储数据对象 
	const itemStorage = {
		fetch: function () { // 获取本地数据
			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
		},
		save: function (items) { // 保存数据到本地
			localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
		}
	}
	const items = [
		/* {
					id: 1,
					contents: 'java',
					completed: true
				},
				{
					id: 2,
					contents: 'vue',
					completed: false
				},
				{
					id: 3,
					contents: 'english',
					completed: false
				} */
	]
	//自定义指令v-todo-focus
	Vue.directive('app-focus', {
		inserted(el, binding) {
			el.focus()
		}
	})

	var app = new Vue({
		el: '.todoapp',
		data: {
			items: itemStorage.fetch(), //获取本地数据进行初始化,
			currentItem: null,
			filterStatus: 'all' // 上面不要少了逗号，接收变化的状态值
			// remaining: 0
		},
		watch: {
			// 如果 items 发生改变，这个函数就会运行
			items: {
				deep: true,// 发现对象内部值的变化, 要在选项参数中指定 deep: true。
				handler: function (newItems, oldItems) {
					itemStorage.save(newItems)
				}
			}
		},
		//自定义局部组件
		directives: {
			'todo-focus': {
				update(el, binding) {
					if (binding.value) {
						el.focus()
					}
				}
			}
		},
		computed: {
			filterItems() {
				switch (this.filterStatus) {
					case "active":
						return this.items.filter(item => !item.completed)
						break
					case "completed":
						return this.items.filter(item => item.completed)
						break
					default:
						return this.items
				}
			},
			toggleAll: {
				/* get:function(){} */
				get() {
					console.info('get', this.remaining)
					return this.remaining === 0
				},
				set(newStatus) {
					console.info("set")
					//循环遍历items
					this.items.forEach(element => {
						element.completed = newStatus
					});

				}
			},
			remaining: function () {
				const unItems = this.items.filter(function (item) {
					return !item.completed
				})
				return unItems.length
			}
		},
		methods: {
			finishEdit(item, index, event) {
				const content = event.target.value.trim();
				if (!content) {
					this.removeItem(index)
					return
				}
				item.contents = content
				this.currentItem = null
			},
			cancelEdit: function () {
				this.currentItem = null
			},
			toEdit: function (item) {
				this.currentItem = item
			},
			clearCompleted: function () {
				this.items = this.items.filter(item => {
					return !item.completed
				})
			},
			removeItem: function (index) {
				console.info(index)
				this.items.splice(index, 1)
			},
			addItem: function (event) {
				console.info(event.target.value)
				/* 点击添加按钮时
				1.获取值并去空格 查看序号
				2.长度大于0 添加到items
				*/
				const id = this.items.length + 1;
				const contents = event.target.value.trim();
				const item = {
					id: id,
					contents: contents,
					completed: false
				}
				if (!contents.length) {
					return;
				} else {
					this.items.push(item)
				}
				event.target.value = ''
			}
		}
	})
	//当路由 hash 值改变后会自动调用此函数
	window.onhashchange = function () {
		console.log('hash改变了', window.location.hash)
		// 1.获取点击的路由 hash , 当截取的 hash 不为空返回截取的，为空时返回 'all' 
		const hash = window.location.hash.substr(2) || 'all'
		console.log('hash', hash)
		// 2. 状态一旦改变，将 hash 赋值给 filterStatus
		// 当计算属性 filterItems 感知到 filterStatus 变化后，就会重新过滤
		// 当 filterItems 重新过滤出目标数据后，则自动同步更新到视图中 
		app.filterStatus = hash
	}
	// 第一次访问页面时,调用一次让状态生效 
	window.onhashchange()
})(Vue);
